<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
<canvas id="pane" width="1024" height="520"></canvas>
<audio id="sound">
    <source src="圣托里尼 - 轻音乐网.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<p id="scale">result:</p>

<script>
    // 播放音乐
    var sound = document.getElementById("sound")
    sound.volume = 0.9;
    sound.play();

    // 设置画图元素
    var bg = new Image();
    bg.src = "img/bg.png";
    var flower = new Image();
    flower.src = "img/flower.png";

    // 画布图像
    var canvas = document.getElementById("pane");
    var ctx = canvas.getContext("2d");


    // 绘制图像
    //        bg.onload = function () {
    //            ctx.drawImage(bg, 0, 0);
    //        }
    //        flower.onload = function () {
    ////            var flowerX = Math.floor(Math.random() * (1024-flower.naturalWidth));
    ////            var flowerY = Math.floor(Math.random() * (520-flower.naturalHeight));
    ////
    ////            var scale = Math.floor(Math.random()*71 + 30)/100;
    //
    //            // 在缩放指定的对象前,前保存,之后在恢复;save 作用是不影响其他对象
    //            ctx.save();
    //            ctx.scale(scale, scale);
    //            ctx.drawImage(flower, flowerX, flowerY);
    //            ctx.restore();
    //        }


    //
    var flowers = [];
    for(var i = 0; i < 100 ; i++){
        flowers[i] = new MyFlower();
    }


    // 绘制图像
    // 注意 JS 的方法名首字母必须是大写
    var f = new MyFlower();
    setInterval(function () {
        ctx.drawImage(bg, 0, 0);

        for(var i=0;i<flowers.length;i++) {
            flowers[i].paint();
        }

    }, 50); // 50毫秒定时器

    function MyFlower() {
        // this 作用是将变量声明成对象的属性
        // 随机 X、Y坐标
        this.flowerX = Math.floor(Math.random() * (1024-flower.naturalWidth));
        this.flowerY = Math.floor(Math.random() * (520-flower.naturalHeight));
        // 随机缩放值
        /*
         * Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值
         * 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
         * */
        // 例如：var a=Math.random()*2+1，设置一个随机1到3(取不到3)的变量。

        this.scale = Math.floor(Math.random() * 71 + 30)/100;
        var result =  document.getElementById("scale");
        result.innerHTML = "缩放值是: " + this.scale;

        // 下落步长
        this.step = Math.floor(Math.random()*5 + 1);

        // 绘制图像
        this.paint = function () {
//                this.scale = Math.floor(Math.random() * 70 + 30)/100;
//                var result =  document.getElementById("scale");
//                result.innerHTML = "缩放值是: " + this.scale;

            // 坠落
            this.flowerY += this.step;

            // 绘制图像
            ctx.save();
//                ctx.translate(this.flowerX, this.flowerY);

            ctx.scale(this.scale, this.scale);

            ctx.drawImage(flower, this.flowerX, this.flowerY);
            ctx.restore();

            // 边界判断
            if (this.flowerY >= 520){
                this.flowerY = -flower.naturalHeight;
                this.flowerX = Math.floor(Math.random() * (1024-flower.naturalWidth));
            }
//                if (this.flowerX >= 1024){
//                    this.flowerX = -flower.naturalWidth;
//                    this.flowerY = Math.floor(Math.random() * (520-flower.naturalHeight));
//                }
        }
    }
</script>
</body>
</html>